<template>
  <div class="box-line">
    <div class="box">
      {{ 1 + 1 }}
    </div>
    <div class="box">
      {{ 1 + 1 }}
    </div>
    <div class="box">
      {{ 1 + 1 }}
    </div>
  </div>
  <div class="box1-line">
    <div class="box1">
      {{ 1 + 1 }}
    </div>
    <div class="box1">
      {{ 1 + 1 }}
    </div>
    <div class="box1">
      {{ 1 + 1 }}
    </div>
  </div>
  <button @click="add">添加</button>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    add() {
      console.log(`helloworld`)
    }
  }
}
</script>
<style type="text/css" lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  &-line {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    height: 200px;
    justify-items: center;
    align-items: center;
  }
}
.box1 {
  border: 1px solid #000;
  &-line {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    height: 200px;
    justify-content: center;
    align-content: center;
  }
}
</style>
